import React, { Component } from 'react'

export class App extends Component {
    state = {
        list: ['111', '222', '333'],
        text: ''
    }
    render() {
        return (
            <div>
                <h2>单元测试案例 todo</h2>
                <div>
                    <div>
                        <input onChange={(val) => {
                            this.setState({
                                text: val.target.value
                            })
                        }} value={this.state.text}></input>
                        <button onClick={() => {
                            this.setState({
                                list: [...this.state.list,this.state.text],
                                text: ''
                            })
                        }}>add</button>
                    </div>
                    <div>
                        {/* 这里的 <> 和 </> 实际上是 <React.Fragment> 的简写形式。它们的作用是告诉 React，这些元素是作为一个组合单元返回的，但不需要额外的父节点包裹 */}
                        <ul>
                            {
                                this.state.list.map((item, index) => {
                                    return (
                                        <li key={item}>{item} <button onClick={() => {
                                            let newState = [ ...this.state.list ]
                                            newState.splice(index, 1)
                                            this.setState({
                                                list: newState
                                            })
                                        }}>del</button> </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                </div>
            </div>
        )
    }
}